<template>
	<m-layout class="box" title="修改支付密码" gap="30">
		<m-text block spa="0 0 20 0">手机号</m-text>
		<m-input :isLine="false" className="form-Item  " disabled  v-model="phonemaill" placeholder="请输入手机号">
			<!-- <button v-if="!phonemaill" class="getPhone" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
				form-type="submit" slot="right" radius="10">获取</button> -->
		</m-input>
		<m-text block spa="20 0">验证码</m-text>
		<m-input :isLine="false" className="form-Item  form-Item-1 " v-model="code" placeholder="请输入验证码">
			<m-sendCode :value="phonemaill" slot="right"></m-sendCode>
		</m-input>
		<m-text block spa="20 0">新密码</m-text>
		<m-input :isLine="false"  className="form-Item" type="password" v-model="paypassword" placeholder="密码必须包含字母和数字且不少于六位"> </m-input>
		<m-text block spa="20 0">再次确认密码</m-text>
		<m-input :isLine="false"  className="form-Item" type="password" @blur="secondary" v-model="password2" placeholder="再次确认新密码">
		</m-input>
		<m-button spa="100 0 0" block :loading="resetLoading" @click="resetpwd">确认修改</m-button>
	</m-layout>
</template>

<script>
	import { email, mobile,enHisNum } from '@/libs/fn/verify.js'
	import { SetPaypassword } from '@/api/Users.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				phonemaill: "",
				oldpassword: '',
				paypassword: '',
				password2: '',
				code: '',

				resetLoading: false,
				timeObj: '',
				timer: 0,
				codeLoading: false,
			};
		},
		computed: {
			...mapState({
				userinfo: state => state.user.userinfo,
			})
		},
		mounted() {
			this.phonemaill = this.userinfo.phone || this.userinfo.emaill
		},
		methods: {
			switchAccount() {
				this.phonemaill = email(this.phonemaill) ? this.userinfo.phone : this.userinfo.emaill
			},
			secondary() {
				if (this.paypassword != this.password2) {
					this.Toast('两次密码输入不一致')
				}
			},
			async getPhoneNumber(data) {
				const { detail: { encryptedData, iv, code } } = data;
				const { msg } = await BindPhone({
					authcode: code,
				})
				this.Toast(msg)
			
			},
			async resetpwd() {
				if (!this.phonemaill) {
					this.Toast('请输入邮箱')
					return
				}
				if (!this.paypassword) {
					this.Toast('请输入安全密码')
					return
				}
				if (!enHisNum(this.paypassword)) {
					this.Toast('密码必须包含字母和数字且不少于六位')
					return
				}

				if (this.paypassword != this.password2) {
					this.Toast('两次密码输入不一致')
					return
				}
				if (!this.code) {
					this.Toast('请输入验证码')
					return
				}
				this.resetLoading = true;
				const success = await SetPaypassword({
					paypassword: this.paypassword,
					code: this.code,
				})
				this.resetLoading = false;
				if (success) {
					await this.sleep(1000)
					this.Jump()
				}
			},
		}
	}
</script>

<style lang="scss">
	.box {
		min-height: 100vh;
		background: #fff;
	}
	page{
		background: #fff;
	}
	.getPhone {
		display: inline-block;
		margin: 0;
		border-width: 0.5px;
		border-style: solid;
		border-color: var(--theme);
		border-image: initial;
		font-size: 26rpx;
		font-family: "PingFang SC", "PingFang SC";
		padding: 8rpx 34rpx;
		border-radius: 10rpx;
		transform: rotate(0deg);
		background: var(--theme);
		color: #fff;
		line-height: unset;
	
		&::after {
			display: none;
		}
	
	}
	text {
		display: block;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;

	}

	.form-Item {
		height: 92rpx !important;
		box-sizing: border-box;
		margin: 40rpx 0;
		background: #F6F6F6;
		// border: 1px solid #4D536B;
		border-radius: 15rpx;
		padding: 20rpx 28rpx;
		box-sizing: border-box;

		input {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
		}

		/deep/ uni-textarea {
			width: 100%;
			font-size: 26rpx;
			margin: 0;

			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;

		}
	}

	.form-Item-1 {
		padding: 15rpx 28rpx !important;
	}
</style>